<template>  
     <div class="home-container">
         <!-- 头部导航栏 -->
        <header class="home-header wrap" :class="{'active' : headerActive}">
            <i class="iconfont icon-caidan"></i>
            <div class="header-search">
                <span class="app-name">G</span>
                <i class="iconfont icon-search"></i>
                <input class="search-title" placeholder="家电返场同价11.11">
            </div>
            <!-- 判断用户是否登录 -->
            <router-link tag="span" to="/login"  v-if="!isLogin">登录</router-link>
            <router-link tag="span" to="/user" v-else>
                <i class="iconfont icon-iconyonghu"></i>
            </router-link>
        </header>
        <!-- 轮播图区域 -->
        <van-swipe :autoplay="3000" indicator-color="white" class="swiper-container">
            <van-swipe-item v-for="(item,index) in carouselList" :key="index">
                <img :src="item.imgUrl" class="swiper_img" alt=""> 
            </van-swipe-item>
        </van-swipe>
        <!-- 分类 -->
        <div class="category-list">
            <div v-for="(item,index) in categoryList" :key="index" @click="goProduct()">
                <img :src="item.imgUrl"> <span>{{item.name}}</span>
            </div>
        </div>
        <!-- 商品内容 -->
        <div class="floor-list">
            <!-- 爱生活  逛商场-->
            <div class="floor-wrap" v-for="(item,index) in floorList" :key="index">
                <img class="floor-head" :src="item.headUrl">
                <div class="floor-content">
                    <div class="floor-category" v-for="(category,index) in item.list" :key="index">
                        <p>{{category.title}}</p>
                        <p>{{category.desc}}</p>
                        <div class="floor-products">
                            <img :src="product.imgUrl" v-for="(product,index) in category.products" :key="index">
                        </div>
                    </div>
                </div>
            </div>
        </div>
         <!-- 底部导航栏  -->
         <tabBar :active="0"></tabBar>
            
     </div>
</template>


<script>
/*
    @这个是webpack使用loader里配置的,等价于 /src 这个目录。
    
    作用:1.自动补全的扩展名 2.默认路径代理
 */
import tabBar from '@/components/tabBar'
// 调用http方法，并结构赋值
import { getsliders,getCategories,getFloors,getUserInfo} from '@/http/index';

export default {
   components:{
       tabBar
   },
   data(){
       return{
            //头部导航栏背景变换
            headerActive:false,
            // 轮播图片
            carouselList:[],  
            // 分类数据
            categoryList:[],   
            // 商场书籍
            floorList:[], 
            // 用户是否登录
            isLogin:false
       }
    
   },
   methods:{
        //导航栏
        pageScroll(){
             /*  兼容性解决方案*/
            let scrollTop=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop
            scrollTop>100? this.headerActive=true:this.headerActive=false;
        },
        //轮播图
        fetchSliders() {
            getsliders().then(res => {
            this.carouselList = res
             })
             //购物车数据
            this.$store.dispatch("getCartData");
        },
        //分类
        fetchCategories() {
            getCategories().then(res=>{
                this.categoryList=res
            })
            
        },
        // 商品内容  arr[0]:爱生活  arr[1]:逛商场
        fetchFloors() {
            getFloors().then(res=>{
                this.floorList=res
            })
        },
         //跳转商品列表页
        goProduct(){
            this.$router.push('/product-list')
        },

   },
   //实例创建之前
   beforeCreate() {
       //判断用户是否登录
       getUserInfo().then(res => {
           res.status == 0&&res.message!='token不存在' ? this.isLogin = true : this.isLogin = false
           if( res.status != 0) return;
           // 获取用户信息时存储数据
           this.$store.commit('setUserInfo',res.data)
       })
   },
   // 页面渲染之前
   beforeMount(){
       this.fetchSliders();
       this.fetchCategories();
       this.fetchFloors();
   },
   // 页面渲染之后
   mounted() {
    // 添加滚动事件
    window.addEventListener('scroll', this.pageScroll)
   }
}
</script>


<style lang="scss" scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/home';
</style>